<template>
  <div class="p-40">
    <div class="flex flex-row justify-between">
      <el-card :body-style="{ padding: '20px' }" @click.native="$router.push('/member')">
        <div class="flex font-semibold w-200 justify-around">
          <i class="el-icon-s-custom text-blue-600 font-90"></i>
          <div class="text-center mt-10 mr-10">
            <span class="text-gray-500">总社员数</span>
            <p class="mt-30">{{countData.memberCount}}</p>
          </div>
        </div>
      </el-card>

      <el-card :body-style="{ padding: '20px' }" @click.native="$router.push('/article/articleList')">
        <div class="flex font-semibold w-200 justify-around">
          <i class="el-icon-notebook-2 text-red-600 font-90"></i>
          <div class="text-center mt-10 mr-10">
            <span class="text-gray-500">总文章数</span>
            <p class="mt-30">{{countData.articleCount}}</p>
          </div>
        </div>
      </el-card>

      <el-card :body-style="{ padding: '20px' }" @click.native="$router.push('/activity/activityList')">
        <div class="flex font-semibold w-200 justify-around">
          <i class="el-icon-position text-yellow-400 font-90"></i>
          <div class="text-center mt-10 mr-10">
            <span class="text-gray-500">总活动数</span>
            <p class="mt-30">{{countData.activityCount}}</p>
          </div>
        </div>
      </el-card>

      <el-card :body-style="{ padding: '20px' }">
        <div class="flex font-semibold w-200 justify-around">
          <i class="el-icon-chat-dot-round text-green-600 font-90"></i>
          <div class="text-center mt-10 mr-10">
            <span class="text-gray-500">总讨论数</span>
            <p class="mt-30">{{countData.talkCount}}</p>
          </div>
        </div>
      </el-card>
    </div>

    <div ref="chart" class="w-600 height-400 mt-50"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {mapState} from 'vuex'
import {dashboardData} from "@/api/dashboard";

export default {
  name: 'Dashboard',
  data() {
    return {
      echartOption: {
        backgroundColor: '#2c343c',
        title: {
          text: '社团成员年级比',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '年级',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
            ].sort(function (a, b) {
              return a.value - b.value;
            })
          }
        ]
      }, // 图表配置
      echart: null, // 图表实例
      countData:{}
    }
  },
  mounted() {
    this.getDashboardData()
  },
  computed: {

  },
  methods: {
    chartInit() {
      let myChart = echarts.init(this.$refs.chart, 'dark');
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption(this.echartOption)
    },
    async getDashboardData(){
      let result = await dashboardData(this.$store.getters.society_id);
      if(result.code === 200){
        this.countData = result.data;
        result.data.gradeList[0].map((item,index)=>{
          this.echartOption.series[0].data.push({
            name:item + '级',
            value:result.data.gradeList[1][index]
          })
        })

        this.chartInit()
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
